<template>
    <div class="delivery">
        <div class="loadiv" v-if="isModal">
            <smalloading class="loading"></smalloading>
            <div class="mask">
            </div>
        </div>
        <div class="nav">
            <div class="return" v-on:click="back()">
                <span class="arrow"></span>
                <span class="back">返回</span>
            </div>
            <div class="nav_text">
                <p>领料确认</p>
            </div>
        </div>
        <div class="body">
            <!-- <router-link to="CkScan"> -->
            <div class="title scan_" @click="ckScan()">
                <div class="btn">
                    <p>扫描商品条码</p>
                </div>
            </div>
            <!-- </router-link> -->
            <div class="img" v-if="is_scan">
                <input class="is_search" v-focus="is_scan" @blur="is_blur()" @keyup='change_inp($event)' v-model='inp_val' />
            </div>
            <ul>
                <li>
                    <span class="left">领料单号：</span>
                    <span class="right">{{detail.picklistId}}</span>
                </li>
                <li>
                    <span class="left">领&ensp;料&ensp;人：</span>
                    <span class="right">{{detail.receivePersonName}}</span>
                </li>
                <li>
                    <span class="left">备&ensp;&ensp;&ensp;&ensp;注：</span>
                    <span class="right">{{detail.description}}</span>
                </li>

            </ul>
        </div>
        <div class="height">
            <div class="detail">
                <ul v-for="item in product_list" :key="item.id">
                    <!--@click="prompt(item,'')"-->

                    <li>
                        <span class="left">商品编码：</span>
                        <span class="right">{{item.productCode}}</span>
                    </li>
                    <li >
                        <span class="left">货位编号：</span>
                        <span class="right">{{item.cscode}}</span>
                    </li>
                    <li v-show="item.productName.length < 19">
                        <span class="left">商品名称：</span>
                        <span class="right">{{item.productName |format_str}}</span>
                    </li>
                    <li v-show="item.productName.length >= 19">
                        <span class="left">商&ensp;品&ensp;名：</span>
                        <p class="right_">{{item.productName | format_str }}</p>
                    </li>
                    <li>
                        <span class="left">单&ensp;&ensp;&ensp;&ensp;位：</span>
                        <span class="right">{{item.unit}}</span>
                    </li>
                    <li>
                        <span class="left">请领数量：</span>
                        <span class="right"> {{item.quantity}}</span>
                    </li>
                    <li>
                        <span class="left">实发数量：</span>
                        <span class="right"> {{item.pickedQuantity}}</span>
                    </li>
                </ul>

            </div>

        </div>

        <div class="signature" v-show="sign_img == null" v-on:click="sign()">
            <img src='./../../../static/img/6.png'>
        </div>
        <div v-show="sign_img != null" v-on:click="sign()">
            <img class="signature sign_img" v-bind:src="sign_img" />
        </div>
        <div class="btnContainer ">
            <button type="submit " class="SubmitBtn " v-on:click="updatePicklistInfo('save')">暂存</button>
            <button type="submit " class="SubmitBtn " v-on:click="updatePicklistInfo('end')">完成</button>
        </div>
        <div class="pop" v-if="isShow">
            <div class="check_num">
                <div class="hint">
                    <span>提示</span>
                </div>

                <div class="margin">
                    存在未取数量，是否继续？
                </div>

                <button class="affirm" @click="queren">确认</button>
                <button class="cancel" @click="quxiao">取消</button>

            </div>
            <div class="mask">

            </div>
        </div>
    </div>
</template>
<script>
import smalloading from "./../loading/smalloading";
export default {
  name: "delivery",
  data() {
    return {
      isShow: false,
      show: false,
      amount: "",
      material: {
        serial: "3424",
        user_name: "张三",
        vemo: "上海分公司",
        trade_name: "商品",
        standard: "小号",
        unit: "件",
        amount: "33"
      },
      detail: {},
      product_list: [],
      sign_img: "",
      isModal: true,
      inp_val: "",
      is_scan: false
    };
  },
  components: {
    smalloading
  },
  methods: {
    back: function() {
      this.$router.push({ path: "/Material" });
    },
    prompt(res, change) {
      if (this.sign_img != null && this.sign_img != "" && change == "") {
        return;
      }
      this.$prompt("", {
        title: res.productName, //商品名称
        placeholder: "输入领取数量", //
        value: res.quantity
      }).then(v => {
        if (v == "" || !Number(v)) {//判断空 或者 不是数字类型
          this.$layer.alert("输入有误");
          return;
        }
        if(parseInt(v) != (v - 0)){//判断小数时
          this.$layer.alert("输入有误");
          return;
        }
        if ((v - 0) < 0 ) {//判断小于0时候
          this.$layer.alert("输入有误");
          return;
        }
        if (v - 0 > res.quantity) {//判断大于时候
          this.$layer.alert("实发数量大于请领数量");
          return;
        }
        this.product_list.map(item => {
          if (item.productCode.includes(res.productCode)) {
            item.pickedQuantity = v;
          }
        });
        //获取getNum　将product_list　缓存
        sessionStorage.setItem(
          "product_list_ll",
          JSON.stringify(this.product_list)
        );
        this.is_scan = true; //显示扫描窗体
      });
    },
    load_list: function() {
      //productCode : BA0109Z000150001
      this.isModal = true;
      let picklistId = sessionStorage.getItem("picklistId");
      let facilityId = sessionStorage.getItem("facilityId");
      this.$http
        .post("api/motor/getPicklistInfoById", {
          facilityId: facilityId,
          picklistId: picklistId,
          storcode: localStorage.getItem("storcode")
        })
        .then(
          res => {
            this.isModal = false;
            this.detail = res.data;
            console.log(res.data);
            if (res.data.code == 101) {
              this.isModal = false;
              this.$layer.alert("当前用户已在其他设备登录");
              this.$router.push({ path: "/" });
              localStorage.removeItem("authorization");
              return;
            }
            let product_list_ll = sessionStorage.getItem("product_list_ll");
            if (product_list_ll) {
              this.product_list = JSON.parse(product_list_ll);
            } else {
              this.product_list = res.data.product_list;
            }
          },
          err => {
            this.isModal = false;
            this.$layer.alert("未知错误");
            this.$router.push({ path: "/" });
            localStorage.removeItem("authorization");
          }
        );
    },
    sign: function() {
      //领料界面，只要存在数量差 ; 请领数量和实发数量不等
      let _this = this;
      //检查数量属否都相等
      for (let i = 0; i < _this.product_list.length; i++) {
        let product = _this.product_list[i];
        if (product.quantity != product.pickedQuantity) {
          _this.$layer.alert("请领数量和实发数量不等");
          return;
        } else {
          sessionStorage.setItem("mater", "MaterialAffirm");
          _this.$router.push({ path: "/SignedEdition" });
        }
      }
    },
    quxiao: function() {
      this.isShow = false;
    },
    queren: function() {
      this.update("end", "");
    },
    updatePicklistInfo: function(res) {
      let picklistId = sessionStorage.getItem("picklistId");
      let facilityId = sessionStorage.getItem("facilityId");
      let statusId = "";
      let _this = this;

      if (res == "end") {
        statusId = "PICKED";
        if (!_this.sign_img) {
          _this.$toast("缺少签字");
          return;
        }
        //检查数量属否都相等
        for (let i = 0; i < _this.product_list.length; i++) {
          let product = _this.product_list[i];
          let layer = _this.$layer;
          if (product.quantity != product.pickedQuantity) {
            _this.isShow = true; //显示弹窗
            // layer.confirm("存在未取数量，是否继续？", function() {
            //     layer.close(_this.id)
            //     //update(res);
            // })
            return;
          } else {
            layer.close(_this.id);
            _this.update(res, "PICKED");
            return;
          }
        }
      } else {
        _this.update(res, "");
      }
    },
    update: function(res_, statusId) {
      let picklistId = sessionStorage.getItem("picklistId");
      let facilityId = sessionStorage.getItem("facilityId");
      // let statusId = 'PICKED';
      let _this = this;
      _this.isShow = false;
      _this.isModal = true;
      _this.$http
        .post("api/motor/updatePicklistInfo", {
          facilityId: facilityId,
          picklistId: picklistId,
          signImg: _this.sign_img,
          statusId: statusId,
          product_list: _this.product_list
        })
        .then(
          res => {
            _this.isModal = false;
            sessionStorage.removeItem("product_list_ll");
            let result = res.data;

            if (result.code == 101) {
              _this.isModal = false;
              _this.$layer.alert("当前用户已在其他设备登录");
              _this.$router.push({ path: "/" });
              localStorage.removeItem("authorization");
              sessionStorage.removeItem("product_list_ll");
              return;
            }
            if (result.responseMessage != "success") {
              _this.isModal = false;
              _this.$layer.alert(result.errorMessage, function() {
                _this.$layer.close(this.id);
                sessionStorage.removeItem("mater");
                sessionStorage.removeItem("sign_img");
              });
              return;
            } else {
              _this.isModal = false;
              if (res_ == "end") {
                _this.$layer.alert("领料完成", function() {
                  _this.$layer.close(this.id);
                  _this.$router.push({ path: "/Material" });
                });
              } else {
                _this.$layer.alert("领料保存成功", function() {
                  _this.$layer.close(this.id);
                  _this.$router.push({ path: "/Material" });
                });
              }
              sessionStorage.removeItem("mater");
              sessionStorage.removeItem("sign_img");
              return;
            }
          },
          err => {
            _this.isModal = false;

            _this.$layer.alert("未知错误");
            _this.$router.push({ path: "/" });
            localStorage.removeItem("authorization");
            sessionStorage.removeItem("product_list_ll");
          }
        );
    },
    ckScan: function() {
      this.is_scan = true; //显示扫描窗体
    },
    change_inp: function(ev) {
      let this_ = this;
      if (ev.keyCode == 13) {
        setTimeout(function() {
          this_.is_scan = false;
          let ite = null;

          for (let i = 0; i < this_.product_list.length; i++) {
            let item = this_.product_list[i];
            if (item.productCode == this_.inp_val) {
              ite = item; //item.noutnum;
            }
          }
          if (ite == null) {
            this_.$layer.alert("该商品不在本次领料列表中，请确认后再扫", function() {
              this_.$layer.close(this.id);
              this_.inp_val = "";
            });
          }

          // if (ite) {
          this_.prompt(ite, "change");
          /*     this_.inp_val = '';
                        return;
                    } else {
                        this_.$layer.msg('无匹配商品');
                        this_.inp_val = '';
                        return;
                    } */
          this_.inp_val = "";
          return;
        }, 100);
      }
    },
    is_blur: function() {
      this.is_scan = false;
      this.inp_val = "";
    }
  },
  created: function() {
    this.load_list();
    this.sign_img = sessionStorage.getItem("sign_img");
  }
};
</script>
<style lang="css" scoped>
.right_ {
  width: 200px;
  word-break: break-all;
  /* float: right; */
  display: inline-flex !important;
}

.btn {
  margin-left: 3rem;
}

.margin {
  margin: 2rem 1rem 1rem 2rem;
  font-size: 1.6rem;
}

.mask {
  z-index: 4;
  left: 0;
  position: fixed;
  top: 0;
  opacity: 0.4;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.check_num {
  width: 80%;
  background-color: #fff;
  position: fixed;
  z-index: 8;
  margin-left: 10%;
  top: 30%;
  /* padding: 3% 6% 3% 11%; */
  border-radius: 0.5rem;
}

.check_num label {
  font-size: 15px;
}

.check_num input {
  width: 90%;
  font-size: 15px;
  height: 3rem;
  padding-left: 4%;
  margin-top: 5px;
  border: 1px solid #d3dce6;
  border-radius: 6px;
  background: #f9fafc;
}

.hint {
  line-height: 3rem;
  height: 3rem;
  background: rgba(190, 190, 190, 0.21);
  padding-left: 7%;
}

.check_num span {
  font-size: 15px;
  text-align: -webkit-center;
  display: -webkit-box;
}

.affirm {
  display: inline-block;
  background: #195caa;
  width: 30%;
  height: 3.4rem;
  border-radius: 6px;
  border: none;
  color: #fff;
  font-weight: bold;
  padding: 0.5rem 0;
  margin: 3% 6% 3% 14%;
  outline: none;
  font-size: 1.5rem;
}

.cancel {
  display: inline-block;
  background: #fff;
  width: 30%;
  height: 3.4rem;
  border-radius: 6px;
  border: 1px solid #668292;
  color: #195caa;
  font-weight: bold;
  padding: 0.5rem 0;
  margin: 17px;
  outline: none;
  font-size: 1.5rem;
}

.is_search {
  width: 85%;
  height: 50px;
  border: 1px solid gray;
  padding: 10px;
  font-size: 20px;
  border-radius: 5px;
  margin-top: 6%;
}

.img img {
  width: 26rem;
}

.img {
  border-radius: 5px;
  width: 100%;
  height: 20%;
  position: fixed;
  z-index: 100;
  margin-top: 8rem;
  text-align: center;
  background-color: #ebebeb;
}

.title {
  padding-top: 1rem;
  height: 5rem !important;
  background: #fff;
  box-shadow: 0px 3px 5px #999;
  text-align: center;
  padding-right: 10%;
}

.btn {
  height: 2.5rem;
  width: 80% !important;
  background: #fcfcfc;
  border: 1px solid #dcdada;
  border-radius: 1rem;
  color: #49a1de;
  line-height: 1rem;
  font-size: 1.2rem;
  margin-top: 0.3rem;
}

.btn p {
  font-weight: bold !important;
}

.scan_ {
  position: fixed;
  width: 100%;
}

.scan_ :active {
  background-color: #668292;
  color: #fff;
}

.loadiv {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100;
  /* background-color: gray; */
  /* opacity: 0.1; */
}

.loading {
  margin: 60% auto;
  z-index: 88;
}

.signature img {
  width: 3.4rem;
  margin-top: 1.3rem;
}

.signature {
  margin: 1rem 3.5rem;
  text-align: center;
  width: 80%;
  height: 6.4rem;
  background: #ffffff;
  border: 1px solid #bebebe;
  border-radius: 8px;
}

.sign_img {
  padding-left: 70px;
}

.mar {
  width: 65%;
}

.btn {
  width: 70%;
  background: #fcfcfc;
  border: 1px solid #dcdada;
  border-radius: 1rem;
  color: #49a1de;
}

.body {
  padding-top: 4rem;
  margin-bottom: 1rem;
  background: #fff;
}

.body ul {
  margin-top: 5rem;
}

.body li:last-child {
  border: none;
}

.body li {
  font-size: 1.3rem;
  color: gray;
  max-height: 5rem;
  line-height: 3rem;
  border-bottom: 1px solid #e5e3e3;
}

.body .left {
  padding: 0 1rem;
  display: inline-block;
  /* width: 65%; */
}

.body .right {
  float: right;
  margin-right: 5px;
}

.btnContainer {
  padding-bottom: 3rem;
  width: 100%;

  text-align: center;
  padding: 0.83rem 0;
}

.btnContainer .SubmitBtn {
  background: #668292;
  width: 35%;
  height: 3.2rem;
  border-radius: 6px;
  border: none;
  color: #fff;
  font-size: 15px;

  padding: 0.5rem 0;
  outline: none;
  margin: 0 1rem;
}

.detail {
  margin: 1rem 0;
  background: #fff;
}

.detail ul {
  margin-top: 1rem;
  box-shadow: 0px 0px 15px #999;
}

.detail li {
  font-size: 1.3rem;
  color: gray;
  min-height: 2rem;
  line-height: 2rem;
}

.detail .left {
  padding: 0 1.8rem;
  display: inline-block;
  /* width: 65%; */
}

.detail .right {
  float: right;
  margin-right: 15px;
}

.height {
  /* height: 19rem; */
  /* background: #fff; */
  overflow: scroll;
}

.arrow {
  border: 0.15rem solid #fff;
  border-width: 0.15rem 0 0 0.15rem;
  display: inline-block;
  height: 0.85rem;
  width: 0.85rem;
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(135deg);
  -webkit-transition: all 0.5s ease-in 0.1s;
  transform-origin: center center;
  transform: rotate(-45deg);
  transition: all 0.5s ease-in 0.1s;
}

.return {
  width: 41%;
  padding-left: 1.5rem;
}

.back {
  font-size: 1.3rem;
  color: #fff;
}

.nav {
  width: 100%;
  position: fixed;
  z-index: 33;
  line-height: 4rem;
  display: -webkit-box;
  background: #668292;
  height: 4rem;
}

.nav_text {
  font-size: 1.6rem;
  color: #fff;
}
</style>